<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>consteloation</title>
    <link rel="stylesheet" href="./CSS/all.css">
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>今日星座</h1>
        </div>
        <div class="wrapper">
            <div class="input-data">
                <select class="chooseConstellation">
                    <option checked>请选择你的星座</option>
                    <option value="baiyang">白羊座</option>
                    <option value="jinniu">金牛座</option>
                    <option value="shuangzi">双子座</option>
                    <option value="juxie">巨蟹座</option>
                    <option value="shizi">狮子座</option>
                    <option value="chunv">处女座</option>
                    <option value="tiancheng">天秤座</option>
                    <option value="tianxie">天蝎座</option>
                    <option value="mojie">摩羯座</option>
                    <option value="shuiping">水瓶座</option>
                    <option value="shuangyu">双鱼座</option>
                    <option value="sheshou">射手座</option>
                </select>
            </div>
        </div>
        <div class="search">
            <select class="selectMethod">
                <option checked>选择你的请求方式</option>
                <option value="axios">axios</option>
                <option value="jq">ajax</option>
                <option value="js">原生ajax</option>
            </select>
        </div>
        <div class="one"></div>
    </div>

</body>
<style>
    * {
        margin: 0;
        padding: 0;
        outline: none;
    }

    body {
        font-family: 'Roboto', sans-serif;
        background: #353535;
    }

    * {
        margin: 0;
        padding: 0;
        outline: none;
        box-sizing: border-box;
    }


    body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        /* background: linear-gradient(-135deg,#c850c0,#4158d0); */
    }

    .wrapper {
        width: 350px;
        background-color: #fff;
        padding: 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .wrapper .input-data {
        width: 100%;
        height: 40px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    select {
        width: 200px;
        height: 20px;
        text-align: center;
        border-radius: 10px;
    }

    .wrapper .input-data input {
        width: 100%;
        height: 100%;
        border: none;
        border-bottom: 2px solid silver;
        font-size: 17px;
    }

    .input-data input:focus~label,
    .input-data input:valid~label {
        transform: translateY(-20px);
        font-size: 15px;
        color: #4158D0;
    }

    .wrapper .input-data label {
        position: absolute;
        bottom: 10px;
        left: 0;
        color: grey;
        pointer-events: none;
        transition: all 0.3s ease;
    }

    .wrapper .input-data .underline {
        position: absolute;
        bottom: 0px;
        height: 2px;
        width: 100%;
    }

    .input-data .underline:before {
        position: absolute;
        content: "";
        height: 100%;
        width: 100%;
        background: #4158D0;
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .input-data input:focus~.underline:before,
    .input-data input:valid~.underline:before {
        transform: scaleX(1);
    }


    .card {
        /* position: relative; */
        width: 95%;
        margin: 0 auto;
        border-radius: 25px;
        box-shadow: -11px 11px 1px rgba(0, 0, 0, 0.3);
        position: relative;
        margin-bottom: 20px;
    }


    .card-head {

        position: relative;
        height: 100px;
        background: linear-gradient(135deg, #b9ff6f 8%, #05680f 83%);
        /* W3C, IE10+, FF16+, Chrome26+, Opergb(120, 191, 252)Safari7+ */
        border-radius: 25px 25px 0 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;

    }

    .card-head h1 {

        width: 100%;
        height: 20px;
        text-align: center;
        margin-top: 20px;
        font-size: auto;

    }

    .card-head img {

        width: 40px;
        height: 40px;
    }

    .card-logo {
        width: 55px;
        margin: 20px;
    }

    .card-after {
        width: 100%;
        height: 20px;
        background: #fff;
        border-radius: 0 0 25px 25px;
    }

    .card-after img {
        display: block;
        margin: auto;
        width: 20px;
        height: 20px;
    }

    .product-img {
        position: absolute;
        left: 0;
        margin-top: -16px;
        margin-left: 50px;
    }

    .product-detail {
        padding: 0 20px;
        font-size: 11px;
        color: #fff;
    }

    .product-detail h2 {
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 2px;
        padding-bottom: 10px;
        text-transform: uppercase;
    }

    .back-text {
        display: inline-block;
        font-size: 125px;
        font-weight: 900;
        margin-left: -7px;
        margin-top: -12px;
        opacity: 0.1;
    }

    .card-body {
        height: 320px;
        background: #fff;
        border-radius: 0 0 25px 25px;
        overflow: hidden;
    }


    .card-body p {
        width: 90%;
        height: auto;
        margin: 0 auto;
        margin-bottom: 10px;
        font-weight: 1000;
        font-size: 10px;
        line-height: 30px;

    }

    .product-title {
        padding: 20px 20px 5px 20px;
        display: block;
        font-size: 17px;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .product-title b {
        font-weight: 900;
        letter-spacing: 0px;
    }

    .badge {
        position: relative;
        font-size: 10px;
        font-weight: 300;
        color: #fff;
        background: #11e95b;
        padding: 2px 5px;
        border-radius: 4px;
        top: -2px;
        margin-left: 5px;
    }

    .product-caption {
        display: block;
        padding: 0 20px;
        font-size: 10px;
        font-weight: 400;
        text-transform: uppercase;
    }

    .product-rating {
        padding: 0 20px;
        font-size: 11px;
    }

    .product-rating i.grey {
        color: #acacab;
    }

    .product-size h4 {
        font-size: 11px;
        padding: 0 21px;
        margin-top: 15px;
        padding-bottom: 10px;
        text-transform: uppercase;
    }

    .ul-size {
        margin-left: 15px;
    }

    .ul-size li {
        list-style: none;
        float: left;
        margin-right: 20px;
    }

    .ul-size li a {
        display: inline-block;
        text-decoration: none;
        font-size: 11px;
        width: 22px;
        height: 22px;
        border-radius: 100%;
        text-align: center;
        line-height: 23px;
        color: #000;
    }

    .ul-size li a.active {
        background: #f35e3d;
        color: #fff;
    }

    .product-size:before,
    .product-size:after {
        content: '';
        display: block;
        clear: both;
    }

    .product-color h4 {
        font-size: 11px;
        padding: 0 21px;
        margin-top: 20px;
        padding-bottom: 20px;
        text-transform: uppercase;
    }

    .ul-color {
        margin-left: 27px;
    }

    .ul-color li {
        list-style: none;
        float: left;
        margin-right: 20px;
    }

    .ul-color li img {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 100%;
    }

    .ul-color-li-img-add {
        border: .5px solid orangered;
    }

    .ul-color li a.orange {
        background: #f35e3d;
    }

    .ul-color li a.green {
        background: #11e95b;
    }

    .ul-color li a.yellow {
        background: #ffd414;
    }

    .ul-color li a.active:after {
        position: absolute;
        content: '';
        display: inline-block;
        border: 1px solid #f35e3d;
        width: 24px;
        height: 24px;
        border-radius: 100%;
        margin-left: -5px;
        margin-top: -5px;
    }

    .product-price {
        position: absolute;
        background: #11e95b;
        padding: 7px 20px;
        text-align: center;
        display: inline-block;
        font-size: 24px;
        font-weight: 200;
        color: #fff;
        border-radius: 7px;
        margin-top: -13px;
        margin-left: -5px;
        box-shadow: -10px 20px 15px -10px rgba(17, 233, 91, 0.3);
    }

    .product-price b {
        margin-left: 5px;
    }



    .yt {
        position: fixed;
        padding: 7px 10px 3px 10px;
        top: 5px;
        right: 5px;
        background: rgba(0, 0, 0, 0.1);
    }

    .yt:hover {
        background: rgba(0, 0, 0, 0.2);
    }
</style>
<script type="module">
    import * as method from './JS/everyMethod.js'
    window.onload = function () {
        let constellation;
        function exegudateClick() {
            $('.card-after').click(function () {
                if (this.children[0].style.display == 'block') {
                    this.children[0].style.display = 'none'
                    this.children[1].style.display = 'block'
                    this.previousElementSibling.style.height = 'auto'
                } else {
                    this.children[0].style.display = 'block'
                    this.children[1].style.display = 'none'
                    this.previousElementSibling.style.height = '320px'
                }
            })
        }

        $('.selectMethod').change(function (event) {
            let value = event.target.value
            constellation = $('.chooseConstellation')[0].value
            if (constellation !== '请选择你的星座') {
                let url = `http://ali-star-lucky.showapi.com/star?needWeek=1&needMonth=1&star=${constellation}&needTomorrow=1&needYear=1`
                if (value == 'jq') {
                    method.xmlFindJq('GET', url, jqXhrGetData)
                } else if (value == 'axios') {
                    method.axiosFind('GET', url, axiosGetData)
                } else if (value == 'js') {
                    method.xmlFindJs('GET', url, jsXhrGetData)
                }
            } else {
                alert('请选择你的星座')
            }
        })
        function axiosGetData(response) {
            execudateData(response.data)
        }
        function jqXhrGetData(response) {

            execudateData(response)
        }
        function jsXhrGetData(response) {
            execudateData(JSON.parse(response))
        }

        function exechdateClick() {
            $('.card-after').click(function () {
                this.previousElementSibling.css('overflow', '')
                this.previousElementSibling.css('height', 'auto')
            })
        }

        function execudateData(currentResponse) {
            console.log(currentResponse)
            $('.allImgChange').src = `./Image/${constellation}.png`
            const responseDataCurrent = currentResponse.showapi_res_body
            let strList;
            const keys = Object.keys(responseDataCurrent)
            try {
                strList = `
                     <div class="card card1">
            <div class="card-head">
                <h1>年运势</h1>
                <img class="allImgChange" src="./Image/${constellation}.png" />
            </div>
            <div class="card-body">
                <p><span>总评分</span>
                    <span>${responseDataCurrent.year.general_index}分</span>
                </p>
                <p><span>金钱运势${responseDataCurrent.year.money_index}分</span>
                    <span>${responseDataCurrent.year.money_txt}</span>
                </p>
                <p><span>总描述</span>
                    <span>${responseDataCurrent.year.general_txt}</span>
                </p>
                <p><span>健康状况</span>
                    <span>${responseDataCurrent.year.health_txt}</span>
                </p>
                <p><span>爱情运势</span>
                    <span>${responseDataCurrent.year.love_txt}</span>
                </p>
                <p><span>工作运势</span>
                    <span>${responseDataCurrent.year.work_txt}</span>
                </p>
            </div>
            <div class="card-after">
                <img class="imgDown" style="display: block;" src="./Image/向下.png">
                <img class="imgUp" style="display: none;" src="./Image/向上.png">
            </div>
        </div>
        <div class="card card2">
            <div class="card-head">
                <h1>月运势</h1>
                <img class="allImgChange" src="./Image//${constellation}.png" />
            </div>
            <div class="card-body">
                <p><span>总评分</span>
                    <span>${responseDataCurrent.month.general_index}分</span>
                </p>
                <p><span>金钱运势${responseDataCurrent.month.money_index}分</span>
                    <span>${responseDataCurrent.month.money_txt}</span>
                </p>
                <p><span>总描述</span>
                    <span>${responseDataCurrent.month.general_txt}</span>
                </p>
                <p><span>健康状况</span>
                    <span>${responseDataCurrent.month.health_txt}</span>
                </p>
                <p><span>爱情运势</span>
                    <span>${responseDataCurrent.month.love_txt}</span>
                </p>
                <p><span>工作运势</span>
                    <span>${responseDataCurrent.month.work_txt}</span>
                </p>
            </div>
            <div class="card-after">
                <img class="imgDown" style="display: block;" src="./Image/向下.png">
                <img class="imgUp" style="display: none;" src="./Image/向上.png">
            </div>

        </div>
        <div class="card card3">
            <div class="card-head">
                <h1>周运势</h1>
                <img class="allImgChange" src="./Image//${constellation}.png" />
            </div>
            <div class="card-body">
                <p><span>总评分</span>
                    <span>${responseDataCurrent.week.general_index}分</span>
                </p>
                <p><span>金钱运势${responseDataCurrent.week.money_index}分</span>
                    <span>${responseDataCurrent.week.money_txt}</span>
                </p>
                <p><span>总描述</span>
                    <span>${responseDataCurrent.week.general_txt}</span>
                </p>
                <p><span>健康状况</span>
                    <span>${responseDataCurrent.week.health_txt}</span>
                </p>
                <p><span>爱情运势</span>
                    <span>${responseDataCurrent.week.love_txt}</span>
                </p>
                <p><span>工作运势</span>
                    <span>${responseDataCurrent.week.work_txt}</span>
                </p>
            </div>
            <div class="card-after">
                <img class="imgDown" style="display: block;" src="./Image/向下.png">
                <img class="imgUp" style="display: none;" src="./Image/向上.png">
            </div>
        </div>
        <div class="card card3">
            <div class="card-head">
                <h1>明天运势</h1>
                <img class="allImgChange" src="./Image//${constellation}.png" />
            </div>
            <div class="card-body">
                <p><span>总评分</span>
                    <span>${responseDataCurrent.tomorrow.general_index}分</span>
                </p>
                <p><span>金钱运势${responseDataCurrent.tomorrow.money_index}分</span>
                    <span>${responseDataCurrent.tomorrow.money_txt}</span>
                </p>
                <p><span>总描述</span>
                    <span>${responseDataCurrent.tomorrow.general_txt}</span>
                </p>
                <p><span>健康状况</span>
                    <span>${responseDataCurrent.tomorrow.health_txt}</span>
                </p>
                <p><span>爱情运势</span>
                    <span>${responseDataCurrent.tomorrow.love_txt}</span>
                </p>
                <p><span>工作运势</span>
                    <span>${responseDataCurrent.tomorrow.work_txt}</span>
                </p>
            </div>
            <div class="card-after">
                <img class="imgDown" style="display: block;" src="./Image/向下.png">
                <img class="imgUp" style="display: none;" src="./Image/向上.png">
            </div>
        </div>
`
            } catch (err) {
                console.log(err)
            } finally {
            }
            $('.one').append(strList)
            exegudateClick()
        }
    }
</script>

</html>